<!doctype html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head th:replace="menu/import::semantic">
<title id="title">角色管理-物流系统</title>
</head>
<script th:src="@{/js/distribution/list.js}"></script>
<body>
	<div class="ui main container">
		<div class="ui clearing segment">
			<form th:action="@{/role}" id="filterForm" class="ui form" method="get">
				<div class="fields">
					<div class="field">
						<label>角色名：</label> <input type="text" name="name" placeholder=""
							style='width: 150px;' th:value="${role.name}" />
					</div>
					<div style="height: 20px; line-height: 80px;">
						<button shiro:hasPermission="permission.role.find" id="query"
							class="ui red button" type="submit">查询</button>
						<div class="ui buttons">
							<button id="clear" class="ui white button" type="button"
								onclick="$('.ui.form').form('clear')">重置</button>
						</div>
					</div>
				</div>
			</form>
		</div>
		<div shiro:hasRole="admin" class="ui clearing segment">
			<div class="inline fields">
				<button shiro:hasRole="admin"
					class="ui red button" type="button" onclick="addDetail()">
					添加</button>
				<div class="ui buttons">
					<button shiro:hasRole="admin"
						class="ui red button" type="button" onclick="doDelect()">移除</button>
				</div>
			</div>
		</div>
		<div style="overflow: auto;">
			<table class="ui red table" th:fragment="showTable">
				<thead>
					<tr class="single line">
						<th><input id="chk_all" name="chk_all" type="checkbox" /></th>
						<th>角色名</th>
						<th>操作</th>
						<th>创建时间</th>
						<th>创建人</th>
						<th>更新时间</th>
						<th>更新人</th>
					</tr>
				</thead>
				<tbody th:if="${pageInfo}">
					<tr th:each="role : ${pageInfo.list}">
						<td><input type="checkbox" name="chk_list" id="chk_list"
							th:value="${role.id}" /></td>
						<td th:text="${role.name}"></td>
						<td shiro:hasRole="admin"><a href="#"
							th:onclick="'permission(\'' + ${role.id} + '\');'" th:text="权限"></a>
						<td shiro:lacksRole="admin" th:text="权限" />
						</td>
						<td
							th:text="${#dates.format(role.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
						<td th:text="${role.createBy}"></td>
						<td
							th:text="${#dates.format(role.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
						<td th:text="${role.updateBy}"></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<script type="text/javascript">
		$(function() {
			$(".ui.dropdown").dropdown();
			//全选和全不选
			$('#chk_all').bind('click', function() {
				if (this.checked) { //全选
					$("input[name='chk_list']").each(function() {
						$(this).prop('checked', true);
					})
				} else { //全不选
					$("input[name='chk_list']").each(function() {
						$(this).prop('checked', false);
					})
				}
			});
			//所有的子项选中或者不全选中后，全选按钮也选中或者不选中
			var allLength = $("input[name='chk_list']").length; //所有的checkbox的长度
			$("input[name='chk_list']")
					.each(
							function() {
								$(this)
										.bind(
												'click',
												function() {
													var selectedLength = $("input[name='chk_list']:checked").length;//所有的选中的checkbox的长度
													if (selectedLength == allLength) {
														$('#chk_all')
																.prop(
																		"checked",
																		true);//全选按钮
													} else {
														$('#chk_all').prop(
																"checked",
																false);
													}

												})

							})
		})
		function permission(id) {
			$.ajax({
				type : "POST",
				url : "permission",
				data : {
					"roleId" : id
				},
				cache : false,
				timeout : 600000,
				success : function(data) {
					layer.open({
						type : 1,
						title : '权限管理页面',
						skin : 'layui-layer-rim', //样式类名
						anim : 2,
						area : [ '450px', '540px' ], //宽高
						shadeClose : false, //开启遮罩关闭
						content : data
					});
				},
				error : function(jqXHR, textStatus, errorThrown) {
					alert("error");
					alert(jqXHR.responseText);
				}
			});
		}
		function addDetail() {
			$.ajax({
				type : "GET",
				url : "role/adddetail",
				cache : false,
				timeout : 600000,
				success : function(data) {
					layer.open({
						type : 1,
						title : '添加页面',
						skin : 'layui-layer-rim', //样式类名
						anim : 2,
						area : [ '400px', '200px' ], //宽高
						shadeClose : false, //开启遮罩关闭
						content : data
					});
				},
			});
		}
		function doDelect() {
			obj = document.getElementsByName("chk_list");
			s = "";
			for (var i = 0; i < obj.length; i++) {
				if (obj[i].checked)
					s += obj[i].value + ','; //如果选中，将value添加到变量s中 
			}
			s = s.substring(0, s.length - 1);
			if (s == "") {
				alert("请勾选需要删除的信息！");
			} else {
				if (confirm("您真的确定要删除吗？\n请确认！") == true) {
					$.ajax({
						type : "GET",
						url : "role/delete",
						data : {
							"ids" : s
						},
						cache : false,
						timeout : 600000,
						success : function(data) {
							window.location.reload();
							alert("已删除！");
						},
						error : function(jqXHR, textStatus, errorThrown) {
							window.location.reload();
						}
					});
				} else {

					alert("已取消！");
				}
			}
		}
	</script>
</body>
</html>
